<template>
  <div class="user-card" @click="handleClick">
    <div class="top-row">
      <div class="user-avatar-container">
        <!-- 用户头像 -->
        <a-avatar v-if="avatar" :size="48" shape="square" :image-url="avatar" class="user-avatar"/>
        <a-avatar v-else :size="48" shape="square" :style="{ backgroundColor: '#33c9ff'}" class="user-avatar">
          <IconUser/>
        </a-avatar>
      </div>
      <div class="user-info-container">
        <!-- 用户昵称 -->
        <a-typography-title :heading="6" class="user-nickname">
          {{ nickname }}
        </a-typography-title>
        <!-- 用户描述 -->
        <a-typography-paragraph
          class="user-desc"
          :ellipsis="{ rows: 1 }"
        >
          {{ userDesc }}
        </a-typography-paragraph>
      </div>
    </div>
    <div class="bottom-row">
      <!-- 粉丝数量 -->
      <span class="count-info">粉丝: {{ fansNum || 0 }}</span>
      <!-- 关注数量 -->
      <span class="count-info">关注: {{ followNum || 0 }}</span>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { IconUser } from '@arco-design/web-vue/es/icon';
import router from "@/router/index.js";

const props = defineProps({
  id: {
    type: [String, null],
    required: false,
    default: null
  },
  nickname: {
    type: [String, null],
    required: false,
    default: null
  },
  avatar: {
    type: [String, null],
    required: false,
    default: null
  },
  userDesc: {
    type: [String, null],
    required: false,
    default: null
  },
  fansNum: {
    type: [Number, null],
    required: false,
    default: null
  },
  followNum: {
    type: [Number, null],
    required: false,
    default: null
  }
})

const handleClick = () => {
  if (props.id) {
    router.push(`/user/${props.id}`);
  }
};
</script>

<style scoped>
.user-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--color-neutral-4);
  width: 260px;
  transition: all 0.2s;
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--color-bg-2);
  padding: 20px;
}

.top-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.user-avatar-container {
  margin-right: 20px;
}

.user-info-container {
  flex: 1;
}

.bottom-row {
  display: flex;
  width: 100%;
}

.count-info {
  margin-right: 20px;
  color: var(--color-text-2);
}

.user-card:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.user-nickname {
  font-weight: 600;
}

.user-desc {
  color: var(--color-text-2);
}
</style>
